<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style>
        #d1 {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin: 10px auto;
            /*background-image: url("../../image/冰箱.png");*/
            /*background-repeat: repeat-y;*/
            /*background-color: #EDB21C;*/
            background:url("../../image/ll.jpg") no-repeat;
            /*
                background-size:length | cover | contain;
                    background-size: 50px； 设置背景图片宽50px
                    background-size:50px 100px  设置背景图片宽50px 高100px
                    background-size :cover;  背景图片会完全覆盖整个容器，并保持图片的原始宽高比例。
                    background-size:contain;  背景图片会完整显示在容器内，并保持图片的原始宽高比例。
            */
            background-size: cover;
            /*background-position: 100px 400px;*/
        }

        input  {
            width:300px;
            height:35px;
        }
        #user_name{
            /*background:image position / size repeat color;*/
            /*background: url("../../image/用户.png") no-repeat;*/
            /*background-position: 268px;*/
            background:url("../../image/用户.png") 268px no-repeat;
        }
        #pass{
            /*background:url("../../image/密码.png") no-repeat;*/
            /*background-position: 268px 4px;*/
            background:url("../../image/密码.png") 268px 4px no-repeat;
        }
    </style>

</head>
<body>
    <div id="d1"></div>

    <hr>

    <form action="#" method="get">
        <div>
            <input type="text" placeholder="请输入用户名" name="username"  id="user_name">
        </div>
        <div>
            <input type="password" placeholder="请输入密码" name="passworad" id="pass">
        </div>
    </form>
</body>
</html>